
import React,{ Component } from 'react';
import { TimePicker,Form,Button } from 'antd';
import moment from 'moment';
const FormItem = Form.Item;

class TimePickers extends Component {
	constructor(props) {
		super(props);
		this.state = {
			endOpen: false,
			startTimeValue: '',
			endTimeValue: '',
		}
	}
	timeStartPickerEvent= (time)=>{
        this.onChange('startTimeValue',time);
	}
	timeEndPickerEvent= (time)=>{
		this.onChange('endTimeValue',time);	
	}
	onChange (field,value) {
		this.setState({
			[field]: value
		})
	}
	handleStartOpenChange=(open)=>{
		//面板是否打开
		if(!open) {
			this.setState({
				endOpen: true
			})
		}
	}
	handleEndOpenChange=(open)=>{
		this.setState({
			endOpen: open
		})
	}
    /**
	 *
     * disableEndHours () 禁止选择部分小时
     */
	disableEndHours=()=>{
        // console.log('end',this.state.endHours.valueOf());
        var date = new Date(this.state.startTimeValue.valueOf());
        var hour = date.getHours();
        var arr = [];
        for(var i = 0; i < hour; i++){
        	arr.push(i);
		}
		return arr;
	}
	/**
     *
     * disabledEndMinutes() 禁止选择部分分钟
     */
	disabledEndMinutes=(selectedHour)=>{
		//console.log('结束的小时：',selectedHour);
		var date = new Date(this.state.startTimeValue.valueOf());
		var hour = date.getHours();
		var minutes = date.getMinutes();
		if(selectedHour === hour) {
			var minuteArr = [];
			for( var m=0;m<minutes;m++ ) {
				minuteArr.push(m);
			}
			return minuteArr;
		}
	}
    /**
	 *	disabledEndSeconds() 禁止选择部分秒
     */
	disabledEndSeconds=(selectedHour, selectedMinute)=>{
        // console.log('结束的小时：',selectedHour);
        // console.log('结束的分钟：',selectedMinute);
		var date = new Date(this.state.startTimeValue.valueOf());
		var hour = date.getHours();
		var minutes = date.getMinutes();
		var seconds = date.getSeconds();
		if( hour === selectedHour ) {
			console.log('开始时间===结束时间');
			if( selectedMinute === minutes) {
				console.log('开始的分钟 === 结束的分钟');
				var secondArr = [];
				for(var j=0;j< seconds;j++) {
					secondArr.push(j);
				}
				return secondArr;
			}
		}
	}
	handleClick(e) {
		console.log('登录');
		this.props.form.validateFields((err,value)=>{
			console.log('value',value);
		});
	}
	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<Form>
				<FormItem>
					{
						getFieldDecorator('startTimeValue')(
							<TimePicker
								format = 'HH:mm:ss'
								onChange = { this.timeStartPickerEvent }
								onOpenChange = { this.handleStartOpenChange }
								value={ this.state.startTimeValue }
								defaultValue={moment('00:00:00', 'HH:mm:ss')}
							/>
						)
					}
					
				</FormItem>
				<FormItem>
					{
						getFieldDecorator('endTimeValue')(
							<TimePicker
								disabledHours={ this.disableEndHours }
								disabledMinutes={ this.disabledEndMinutes }
								disabledSeconds={ this.disabledEndSeconds }
								format = 'HH:mm:ss'
								onChange = { this.timeEndPickerEvent }
								open = { this.state.endOpen }
								onOpenChange = { this.handleEndOpenChange }
								value={ this.state.endTimeValue }
								defaultValue={moment('23:59:59', 'HH:mm:ss')}
							/>
						)
					}
				</FormItem>
				<FormItem>
					<Button onClick={ this.handleClick.bind(this) }>
						登录
					</Button>
				</FormItem>
			</Form>
		)
	}
}
export default TimePickers = Form.create({})(TimePickers);